<template>
  <div id="home">
    <NavBar class="home-nav">
      <!--   具名插槽的使用  因为这里就一行代码所以不用将NavBar封装到childComps里面   -->
      <div slot="center">购物街</div>
    </NavBar>
    <tab-control
                 :titles="['流行', '新款', '精选']"
                 @tabClick="tabClick"
                 ref = 'tabControl1'
                 class="tab-control"
                 v-show="isTabFixed"/>
    <!--  丝滑滚动  class设置滚动区域
          ref="scroll"的作用:父组件的方法里可以调用子组件的方法  有点像别名
    -->
    <Scroll  class="content"
             ref="scroll"
    :probe-type="3"
    :pull-up-load="true"
    @scroll="contentScroll"
    @pullingUp="loadMore">

    <HomeSwiper :banners="banner" @swiperImgLoad = 'swiperImgLoad'></HomeSwiper>
    <RecommendView :recommends="recommend"></RecommendView>
    <FeatureView></FeatureView>
    <!--    子串父,父传子都是在这里绑定-->
    <tab-control :titles="['流行', '新款', '精选']"
                 @tabClick="tabClick"
                 ref = 'tabControl2'/>
    <!--展示数据  -->
    <good-list :goods="showGoods"/>
    </Scroll>

    <!--
    这个组件不需要一起滚动,监听back-top使better-scroll滚上去
    监听组件不能直接@click  需要加.native 监听组件的原生(原有的)事件
    v-show是否显示返回顶部的图标   -->
    <back-top @click.native="backClick" v-show="isShowBackTop"/>
    <!-- ul>li{列表$}*100 -->
    <!--<ul>
      <li>列表1</li> <li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li>
      <li>列表6</li><li>列表7</li> <li>列表8</li><li>列表9</li><li>列表10</li>
    </ul>-->
  </div>

</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import TabControl from "../../components/content/tabControl/TabControl";
  import {getHomeMultidata,getHomeGoods} from "@/network/home";
  /*import Swiper from "@/components/common/swiper/Swiper";
  import SwiperItem from "@/components/common/swiper/SwiperItem";*/
   // import {Swiper,SwiperItem} from "@/components/common/swiper"
  import HomeSwiper from './childComps/HomeSwiper'
  import RecommendView from './childComps/RecommendView'
  import FeatureView from './childComps/FeatureView'
  import GoodList from "../../components/content/goods/GoodsList";
  import Scroll from "@/components/common/scroll/Scroll";
  import BackTop from '@/components/content/backTop/BackTop'

  import {debounce} from '@/common/Utils'
  export default {
    name: "FirPage",
    components:{
      NavBar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      TabControl,
      GoodList,
      Scroll,
      BackTop

    },
    data(){
      return{
        //axios返回的数据接收器
        banner: [],
        recommend: [],
        //商品数据  流行新款精选 三栏数据(页码,数据条数[])
        goods: {
          pop: { page: 0, list: [] },
          new: { page: 0, list: [] },
          sell: { page: 0, list: [] }
        },
         currentType: "pop", //页面默认渲染当前类型
         isShowBackTop:false,  //一开始不让返回顶部的图标出现

         TabControlOffSetTop:0,
         isTabFixed:false,
          //离开的时候的position Y滚动值
         saveY:0
      }
    },
    computed: {

      showGoods() {
        return this.goods[this.currentType].list
      }
    },
    mounted() {
      //使用导进来的debounce
      const refresh = debounce(this.$refs.scroll.refresh,300)
      //监听事件总线,图片加载完成(这个不要写在created里面)
      this.$bus.$on('FiritemImageLoad',()=>{
        // console.log('---')
        //每张图片加载成功都会刷一次  这样彻底告别页面加载卡顿的问题★★★★
        //但是切换页面时候会报错 因为scroll里面的refresh还未初始化成功 就调用了,如何解决？
        // scroll里面改成this.scroll&&this.scroll.scrollTo&&this.scroll.refresh();
        // this.scroll&&this.$refs.scroll.refresh();
        refresh()
      })
      //2  要拿组件的$el属性,用于获取组件的元素 (不能放在mounted里面获取)
      /*this.TabControlOffSetTop = this.$refs.tabControl.$el.offsetTop
      console.log(this.TabControlOffSetTop)*/
    },
    methods: {
      // 点击tab实现跳转
      tabClick(index) {
        switch (index) {
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
        //为了使点击的类型与显示额类型保持一致
        this.$refs.tabControl1.currentIndex = index
        this.$refs.tabControl2.currentIndex = index
        //等价
        // this.currentType = Object.keys(this.goods)[index]
      },
      contentScroll(position) {
        //当垂直滚动距离>1000时候 要的是y值
       /* if ((-position.y) > 1000){
          //好像会虚闪
          this.isShowBackTop = !this.isShowBackTop
        }*/
       this.isShowBackTop         = (-position.y) > 1000

        //2决定tabControl是否吸顶
        this.isTabFixed = (-position.y) > 545
      },
      //暂时悬挂
      loadMore() {
        //上拉加载更多 调用网络请求同类型数据

        this.getHomeGoodss(this.currentType);
       /* ★★★★★解决图片加载慢，你拖得快显示不出来的问题
        刷新重新计算图片的可滚动区域高度(改变的是this.$refs.scroll.scrollHeight的值)*/
        // this.$refs.scroll.scroll.refresh();
      },
      backClick() {
        //点击返回顶部图标生效
        //拿组件里methods  不是拿组件里面data属性的scroll方法,否则需要两次.scroll
        this.$refs.scroll.scrollTo(0, 0,1000)
      },
      //首页监听轮播图的加载完成 为了获取正确的tabControl-offsetTop的值
      swiperImgLoad(){
        this.TabControlOffSetTop = this.$refs.tabControl2.$el.offsetTop
      },
      //Ⅱ:网络请求相关:轮播图etc
      getHomeMultidata(){
        getHomeMultidata().then(res=>{
         /*  console.log(res)
           this.result = res*/
          this.banner = res.data.banner.list;
        /*  console.log( this.banner)
            console.log(this.banner)
            获取轮播图下面的推荐数据;*/
          this.recommend = res.data.recommend.list;
        })
      },
      //网络请求相关:获取商品数据
      getHomeGoodss(type){
        const page = this.goods[type].page+1;
        getHomeGoods(type,page).then(res =>{
          //防止页面每次请求都是第一页数据
          //将请求到的数据()赋给goods[type].listlist里面
          this.goods[type].list.push(...res.data.list);
          //使page页面+1
          this.goods[type].page++;
          // console.log(res)
          //调用scroll组件的finishPullUp方法 用于多次上拉加载更多数据
          this.$refs.scroll.finishPullUp()
          // this.$refs.scroll.scroll.finishPullUp()

      })
      }
    },

    created() {
    /*  this.$http.get('/subcategory/3627').then((res)=>{
        console.log(res)
      })*/
      //这里面只写方法调用不写逻辑 (调用的时候记得加上this)
      this.getHomeMultidata();
      //页面一开始就请求了三类数据
      this. getHomeGoodss('pop');
      this. getHomeGoodss('new');
      this. getHomeGoodss('sell');
    },
    activated() {
      //刷新放前面(必须有)
      this.$refs.scroll.refresh()
      this.$refs.scroll.scrollTo(0,this.saveY )

    },
    deactivated() {
      //保存离开此页面时的页面所在的位置状态
     this.saveY = this.$refs.scroll.GetScrollY()
    }
  }
</script>

<style scoped>
  #home{
    /*使整个div下移出nav-bar避免显示不完整*/
    /*padding-top: 44px;*/
    /*100%视口高度*/
    height: 100vh;
    position: relative;
  }
.home-nav{

  /*使用自己定义的颜色*/
  background: var(--color-tint);
  color: white;
  /*固定home-nav的位置  脱离文档流  不需要了*/
/*  position: fixed;
  left:0;
  right:0;
  top:0;
  z-index:9*/
}
.tab-control{
  position: relative;
  z-index: 9;
}
  /*流行新款精选的粘滞定位*/
/*  .tab-control {
    position: sticky;
    !*当距离...多少距离时不动了 兼容性有问题*!
    top: 44px;
    z-index: 9;
    仍然有问题   直接不要这个类了
  .tabFixed{
    position: fixed;
  }
 /*
  /* 去掉top,bottom中间如何显示*/
  .content {
    /*scroll如何显示问题*/
    /*height: 300px;*/
    /*去除鼠标滚轮效果...*/
    overflow: hidden;

    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
  /*.content第二种布局 {*/
  /*height: calc(100% - 93px);*/
  /*overflow: hidden;*/
  /*margin-top: 44px;*/
  /*}*/
</style>
